<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>选择器的优先级</title>
</head>
<!-- 
----------------------
|     选择器  优先级
----------------------
|     内联    1000
|     ID      100
|     类/伪类 100
|     元素    10
|     通配    0
|     继承    无
---------------------
 -->
<!--
--------------------------------
| 当选择器中包含多个选择器时
| 把所有选择器优先级相加进行比较
| 但不会超过自身最大数量级。 
--------------------------------
| 在样式的属性值后添加 !important
| 该属性优先级变为最高(不推荐使用)
|-------------------------------
| 当优先级相同时，使用靠后的选择器
|-------------------------------
| 并集选择器优先级并会相加
| 而是单独计算
| ------------------------------
| a标签以下四个伪类优先级相同
| 书写顺序：
| link=>visited=>hover=>active
--------------------------------
  -->

<style>
  .d1 {

    color: red;
  }

  div>.d2 {
    color: seagreen;
  }
</style>

<body>
  <div class="d1 d2" id="dd" style="font-size: 100px;">
    123
    <p>1233</p>
  </div>
</body>

</html>